<template>
  <div style="width: 100%; height: 100%;">
     <div class="contentWrap">
      <div class="title">

      </div>
      <div  class="body">
        <div class="feng_title">
          <div class="text">
            风力发电站
          </div>
          <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时功率</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">850</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">今日发电量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">2</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">装机容量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">60</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
          </div>
        </div>
          <div class="feng">
          </div>
          <div class="feng_jian">

          </div>

          <div class="huo_title">
            <div class="text">
              火力发电站
            </div>
            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时功率</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">850</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">今日发电量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">0.18</span>
                <span class="left_text_right_style">亿千瓦时</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">装机容量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">60</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="huo">
          </div>

          <div class="huo_jian">

          </div>

          <div class="guangfu_title">
            <div class="text">
              光伏发电站
            </div>
            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时功率</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">850</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">今日发电量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">2</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">装机容量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">60</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="guangfu">
          </div>

          <div class="guangfu_jian">

          </div>

          <div class="shudian_title">
            <div class="text">
              输电线路
            </div>
            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电流</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">4.55</span>
                <span class="left_text_right_style">A</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电压</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">220</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="shudian">
          </div>

          <div class="shudian_jian">

          </div>

          <div class="peidianfang_title">
            <div class="text">
              配电房
            </div>
            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">电压级别</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">850</span>
                <span class="left_text_right_style">MVA</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电流</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">4.55</span>
                <span class="left_text_right_style">A</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="peidianfang">
          </div>

          
          <div class="peidianfang_jian">

          </div>

          <div class="chuneng_title">
            <div class="text">
              储能站
            </div>
            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">当前状态</span></el-col>
              <el-col :span="7">
                <div class="status"></div>
                <span class="left_text_center_style" style="color:#00FF54;font-size: 30px;">放电</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时功率</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">4505</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="chuneng">
          </div>

          <div class="chuneng_jian">
          </div>

          <div class="biandianzhan_title">
            <div class="text">
              变电站
            </div>

            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">电压级别</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">850</span>
                <span class="left_text_right_style">MVA</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电流</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">45.5</span>
                <span class="left_text_right_style">A</span>
              </el-col>
            </el-row>
          </div>

          </div>

          <div class="biandianzhan">
          </div>

          <div class="biandianzhan_jian">
          </div>

          <div class="chongdianzhan_title">
            <div class="text">
              充电站
            </div>

            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时负荷</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">1200</span>
                <span class="left_text_right_style">kW</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">今日充电量</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">220</span>
                <span class="left_text_right_style">kWh</span>
              </el-col>
            </el-row>
          </div>
          </div>

          <div class="chongdianzhan" @click="jump(1)">
            <div></div>
          </div>

          <div class="chongdianzhan_jian">
          </div>

          <div class="juminqu_title">
            <div class="text">
              居民负荷
            </div>

            <div class="contain">
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电流</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">31</span>
                <span class="left_text_right_style">A</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="8"><span class="left_text_style">实时电压</span></el-col>
              <el-col :span="7">
                <span class="left_text_center_style">220</span>
                <span class="left_text_right_style">V</span>
              </el-col>
            </el-row>
          </div>

          </div>

          <div class="juminqu">
          </div>

          <div class="juminqu_jian">
          </div>


      </div>
    </div>
     <!-- </ScaleBox> -->
   
  </div>
</template>
<script>
// import routesList from "@/router/index";
import DevicePixelRatio from '@/utils/evicePixelRatio.js';
import { mapActions } from 'vuex';
export default {
  name: 'homePage',
  data() {
    return {
      // currentRouter: this.$route.path,
      // routesList: this.$router.options.routes,
      // isCollapse: true,
      // logo: require('@/assets/images/logo1.png'),
      // modeDisplay: true, //菜单和头部展示隐藏
    }
  },
  mounted() {
    new DevicePixelRatio().init();
    // this.getUrlParams()
  },
  created(){
    this.$nextTick(() => {
      this.resizeFun()
      window.addEventListener('resize', this.resizeFun)
    })
  },
  computed: {},
  // watch: {
  //   // 监听路由对象 $route 的变化
  //   $route(to, from) {
  //     // 更新导航菜单的显示状态
  //     this.toNav()
  //   },
  // },
  watch: {
    // 通过监听路由来控制tab项的高亮，实现点击菜单项时对应的tab项也高亮
    $route: {
      handler(nowPath, oldPath) {
        console.log('indexAside监听到的路由:', nowPath.path, oldPath.path)
        //将当前路由赋值给 menuActive，这里用来控制激活菜单项
        this.currentRouter = nowPath.path
      },
      // 深度观察监听
      deep: true,

      // 监听路由变化 处理两个组件之间的相互跳转，右侧页面产生变化，但左侧菜单选中状态未刷新
      // $route(to, from) {
      //   this.toNav(to.path)
      // },
      //处理activeName生效，但是openNames不生效的情况
      //运用Menu的updateopened方法：手动更新展开的子目录，注意要在 $nextTick 里调用。对openNames添加watch：
      // parentActiveMenu() {
      //   this.$nextTick(() => {
      //     this.$refs.side_menu.updateOpened()
      //     this.$refs.side_menu.updateActiveName()
      //   })
      // },
      // //监听菜单数据的变化'$store.state.users.routers' 固定写法
      // '$store.state.users.routers': function () {
      //   this.initMenuData()
    },
  },
  methods: {
    jump(type){
      if(type == 1){
        this.$router.push({path:'/sjcdwl'})
      }

    },
    ...mapActions(['resizeFun']),

    handleOpen(key, keyPath) {
      console.log(key, keyPath, '1111')
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    toNav(router) {
      console.log(this.$route.path)
      this.currentRouter = router
      this.$router.push(router)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/common"; 
$bg-url: '@/assets/images/bg.png';
$feng-url: '@/assets/images/风力发电.gif';
$shudian-url: '@/assets/images/输电塔.png';
$peidianfang-url: '@/assets/images/电房.png';
$chuneng-url: '@/assets/images/储能.png';
$biandianzhan-url: '@/assets/images/变电站.png';
$jummin-url: '@/assets/images/居民区.png';
$huolifadianzhan-url: '@/assets/images/火力发电站.gif';
$guangfu-url: '@/assets/images/光伏.gif';
$title-url: '@/assets/images/输电线路弹窗.png';
$jiantou-url: '@/assets/images/箭头.png';
$chongdianzhuangbg-url: '@/assets/images/充电桩bg.png';
$chongdianzhuang-url: '@/assets/images/充电桩.gif';
$xiantiao-url: '@/assets/images/线条.gif';
$status-url: '@/assets/images/status.png';

@mixin title {
  background-image:  url($title-url);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

@mixin bg {
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.status{
  width: 20px;
  height: 20px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image: url($status-url);
}


@mixin jiantou {
  background-image:  url($jiantou-url);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  width: 3.5%;
  height: 1.5%;
  position: absolute;

}


@mixin title_text {
  width: 100%;
  height: 30%;
  text-align: center;
  padding-top: 5%;
  font-size: 32px;
  color: rgb(1,254,254);
  vertical-align: middle; /* 垂直居中 */
}

@mixin contain{
  width: 100%;
  height: 55%;
  display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.left_text_style{
    font-size: 24px;
    color:rgb(227,228,230);
}

.left_text_center_style{
    font-size: 40px;
    color: rgb(1,254,254);
    font-weight: 700;
    vertical-align: middle; /* 垂直居中 */
    text-align: center;
}

.left_text_right_style{
    color: rgb(1,254,254);
}


.body{
  width: 100%;
  height: 90%;
  display: flex;
  background-image: url($xiantiao-url);
  background-size: 90% 75%;
    background-repeat: no-repeat;
    background-position: center;
  // flex-direction: column;
}

.feng_title{
  width: 405.4px;
  height: 250.1px;
  position: absolute;
  left: 5%;
  // display: flex;
  // align-items: center;
  @include title();
  .text{
    display: flex;
    align-items: center;
    justify-content: center;
    @include title_text();
  }
 
}
.feng{
  width: 27%;
  height: 12%;
  position: absolute;
  left: 25%;
  top: 16%;
  background-image:  url($feng-url);
  @include bg;
}
.feng_jian{
  @include jiantou;
  left: 25%;
  top: 17%;
  transform: rotate(-45deg);

  animation: bounce 1s infinite;
   @keyframes bounce {
    0%, 100% { transform: scale(1) rotate(-45deg); }
    50% { transform: translateY(-10px) translateX(-10px) rotate(-45deg) }
    // transform: scale(0.6) rotate(-45deg)
  }
}

.huo_title{
  width: 405.4px;
  height: 250.1px;
    position: absolute;
    right: 15%;
    top: 10%;
    @include title();
    .text{
    display: flex;
    align-items: center;
    justify-content: center;
    @include title_text();
  }
}
.huo{
  width: 718px;
    height: 827px;
    position: absolute;
    right: 8%;
    top: 15%;
  background-image:  url($huolifadianzhan-url);
  @include bg;
}
.huo_jian{
  @include jiantou;
  left: 74%;
  top: 17%;

  animation: bounce2 1s infinite;
   @keyframes bounce2 {
    0%, 100% { transform: scale(1); }
    50% { transform: translateY(-10px) }
    // transform: scale(0.6) rotate(-45deg)
  }
  // transform: rotate(-45deg);
}

.guangfu_title{
  width: 405.4px;
  height: 250.1px;
  position: absolute;
  left: 34%;
  top: 40%;
  @include title();
  .text{
    display: flex;
    align-items: center;
    justify-content: center;
    @include title_text();
  }
}

.guangfu{
  width: 24%;
  height: 10%;
  position: absolute;
  left: 25%;
  top: 29%;
  background-image:  url($guangfu-url);
  @include bg;
}

.guangfu_jian{
  @include jiantou;
  left: 41.5%;
  top: 38%;
  transform: rotate(180deg);

  animation: bounce3 1s infinite;
   @keyframes bounce3 {
    0%, 100% { transform: scale(1) rotate(180deg); }
    50% { transform: translateY(-10px) rotate(180deg)}
  }
}

.shudian_title{
  width: 405.4px;
  height: 210.2px;
      position: absolute;
      left: 55%;
      top: 37%;
      @include title();
      .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
  }
  .contain{
    @include contain;
  }
}

.shudian{
    width: 10%;
    height: 10%;
    position: absolute;
    right: 11%;
    top: 40%;
    background-image:  url($shudian-url);
    @include bg;
}

.shudian_jian{
  @include jiantou;
  left: 75%;
  top: 39%;
  transform: rotate(270deg);

  animation: bounce4 1s infinite;
   @keyframes bounce4 {
    0%, 100% { transform: scale(1) rotate(270deg); }
    50% { transform: translateX(-10px) rotate(270deg)}
    // transform: scale(0.6) rotate(-45deg)
  }

}

.peidianfang_title{
  width: 405.4px;
  height: 210.2px;
  position: absolute;
  left: 78%;
  top: 51%;
    @include title();
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
}
.contain{
    @include contain;
  }
}

.peidianfang{
  width: 736px;
    height: 420px;
    position: absolute;
    right: 23%;
    top: 48%;
    background-image:  url($peidianfang-url);
    @include bg;
}

.peidianfang_jian{
  @include jiantou;
  left: 74%;
  top: 53%;
  transform: rotate(90deg);

  animation: bounce5 1s infinite;
   @keyframes bounce5 {
    0%, 100% { transform: scale(1) rotate(90deg); }
    50% { transform: translateX(-10px) rotate(90deg)}
    // transform: scale(0.6) rotate(-45deg)
  }

}

.chuneng_title{
  width: 405.4px;
      height: 210.2px;
      position: absolute;
      left: 5%;
    top: 55%;
    @include title();
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
}
.contain{
    @include contain;
  }
}

.chuneng{
    width: 861px;
    height: 457px;
    position: absolute;
    // left: 6%;
    top: 42%;
    background-image:  url($chuneng-url);
    @include bg;
}

.chuneng_jian{
  @include jiantou;
  left: 12.5%;
  top: 53%;
  transform: rotate(180deg);

  animation: bounce3 1s infinite;
   @keyframes bounce3 {
    0%, 100% { transform: scale(1) rotate(180deg); }
    50% { transform: translateY(-10px) rotate(180deg)}
    // transform: scale(0.6) rotate(-45deg)
  }
}

.biandianzhan_title{
      width: 405.4px;
      height: 210.2px;
      position: absolute;
      right: 302px;
    bottom: 1237px;
    @include title();
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
}
.contain{
    @include contain;
  }
}

.biandianzhan{
  width: 859px;
    height: 471px;
    position: absolute;
    right: 2%;
    top: 69%;
    background-image:  url($biandianzhan-url);
    @include bg;
}

.biandianzhan_jian{
  @include jiantou;
  left: 75%;
  top: 68%;

  animation: bounce2 1s infinite;
   @keyframes bounce2 {
    0%, 100% { transform: scale(1); }
    50% { transform: translateY(-10px) }
  }
  
}


.chongdianzhan_title{
  width: 405.4px;
      height: 210.2px;
      position: absolute;
      left: 23%;
    top: 75%;
    @include title();
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
}
.contain{
    @include contain;
  }
}

.chongdianzhan{
  width: 930px;
    height: 475px;
    position: absolute;
    left: 10%;
    top: 62%;
    background-image:  url($chongdianzhuangbg-url);
    @include bg;
    >div{
      width: 764px;
      height: 435px;
      background-image:  url($chongdianzhuang-url);
      @include bg;
    }
}

.chongdianzhan_jian{
  @include jiantou;
  left: 31%;
  top: 73.5%;
  transform: rotate(180deg);

  animation: bounce3 1s infinite;
   @keyframes bounce3 {
    0%, 100% { transform: scale(1) rotate(180deg); }
    50% { transform: translateY(-10px) rotate(180deg)}
  }
}

.juminqu_title{
    width: 405.4px;
    height: 210.2px;
    position: absolute;
    right: 11%;
    bottom: 8%;
    @include title();
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      @include title_text();
}
.contain{
    @include contain;
  }
}

.juminqu{
  // width: 33%;928
  //   height: 13%;552
     width: 928px;
    height: 552px;
    position: absolute;
    left: 25%;
    bottom: 3%;
    background-image:  url($jummin-url);
    @include bg;
}

.juminqu_jian{
  @include jiantou;
  right: 664px;
  bottom: 393px;
  transform: rotate(90deg);

  animation: bounce6 1s infinite;
   @keyframes bounce6 {
    0%, 100% { transform: scale(1) rotate(90deg); }
    50% { transform: translateX(-10px) rotate(90deg)}
  }
}


// .el-row {
//     margin-bottom: 4%;
//   }

  .el-col-7 {
    display: flex;
    align-content: center;
    justify-content: start;
    align-items: baseline;
    width: 38%;
  }

  .el-col-8 {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: end;
    flex-direction: column-reverse;
  }

</style>
